<template>
  <view class="tb">
    <button type="primary" @click="getTomorrowWeather">获取明天天气预报</button>
    <view class="tqxs" v-if="tomorrowWeather">
      <view>日期：{{ tomorrowWeather.date }}</view>
      <view>星期：{{ tomorrowWeather.week }}</view>
      <view>最高温：{{ tomorrowWeather.high }}</view>
      <view>最低温：{{ tomorrowWeather.low }}</view>
      <view>天气：{{ tomorrowWeather.type }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tomorrowWeather: null
    }
  },
  methods: {
    getTomorrowWeather() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            this.tomorrowWeather = res.data.data.forecast[1];
          } else {
            uni.showToast({ title: '获取天气失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    }
  }
}
</script>

<style scoped>
.tb {
  padding: 20rpx;
}
.tqxs {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
.tqxs > view {
  margin: 10rpx 0;
}
</style>